<template>
    <div>
        选择分类
        <!-- 我们用data向子组件传值 子组件用props接收data 子组件用$emit向父组件传值(cid) 父组件这边用@cid接收 -->
        <subcate :data='catelist' @cid='getcid'/>
        <van-field
            v-model="name"
            name="名称"
            label="名称"
            placeholder="名称"
            :rules="[{ required: true, message: '请填写用名称' }]"
        />
        <van-field
            v-model="description"
            name="描述"
            label="描述"
            placeholder="描述"
            :rules="[{ required: true, message: '请填写描述' }]"
        />
        <van-field
            v-model="tname"
            name="讲师"
            label="讲师"
            placeholder="讲师"
        />

        图片预览:<van-image
                    width="100"
                    height="100"
                    :src="pic"
                />
        图片上传:<van-uploader :after-read="afterRead" />
        <!--  multiple :max-count="2" 最多上传几个 -->
        视频上传:<van-uploader :after-read="afterReadVedio"  v-model="fileList" multiple :max-count="3" accept=".mp4"/>
        音频上传:<van-uploader :after-read="afterReadRedio"  v-model="musiclist" multiple :max-count="3" accept=".mp3"/>
        <br>
         <van-button color="linear-gradient(to right, #7232dd, #ffffff)" @click="add" style="width:200px" id="add" >
                添加
        </van-button>
    </div>
</template>

<script>
import subcate from './subcate.vue'
    export default {
        //注册子组件
        components:{
            'subcate':subcate
        },
        data(){
            return{
                name:'',
                description:'',
                tname:'',
                fileList:[],
                musiclist:[],
                pic:'',
                catelist:[],
                vedios:[],
                redio:[]


            }
        },
        methods:{
            //图片上传  默认type=1
            afterRead(file,type=1){
                let data=new FormData()
                data.append('id',1)
                data.append('file',file.file)
                this.$axios.post('upload',data)
                .then(res=>{
                    if(type==2){
                        this.vedios.push(res.data.pic)
                    }else if(type==3){
                        this.redio.push(res.data.pic)
                    }else{
                         this.pic='http://localhost:5000/static/upload/'+res.data.pic
                    }
                   
                })
            },
            //视频上传
            afterReadVedio(){
                //循环filelist 然后一个个上传文件 还是调用之前上传图片的方法
                for(var i=0;i<this.fileList.length;i++){
                    // 传一个type=2
                    this.afterRead(this.fileList[i],2)
                }
            },
             //音乐上传
            afterReadRedio(){
                //循环filelist 然后一个个上传文件 还是调用之前上传图片的方法
                for(var i=0;i<this.musiclist.length;i++){
                    // 传一个type=3
                    this.afterRead(this.musiclist[i],3)
                }
            },
            //添加
            add(){
                console.log(this.vedios,this.redio)

            },
            // 获取分类信息
            getcatelist(){
                this.$axios.get('cateM')
                .then(res=>{
                    this.catelist=res.data.list
                })
            },
            //获取选中的分类id
            getcid(v){
                this.cid=v
                console.log(v)
            },

        },
        mounted(){
            this.getcatelist()
        },
        
    }
</script>

<style scoped>

</style>